<template>
  <div class="full-screen">
    <div class="box">
      <!-- <h1>全屏</h1> -->
      <div class="banner" v-show="showPlaylist" @click.capture="showPlaylist = false"></div>
      <div class="mask" :style="`backgroundImage:url(${music.picUrl || music.song.album.picUrl
      })`"></div>

      <header>
        <img src="@/assets/返回.png" @click.stop="$emit('showfull', false)" class="close" />

        <div class="name">
          <b>
            {{ music.name }}
          </b>
          <p v-for="item in music.song.artists" :key="item.id">
            {{ item.name }}
          </p>
        </div>

        <img src="@/assets/分享.png" class="fx" />
      </header>

      <div class="main" @click="flag = false" v-show="flag">
        <div class="round">
          <div class="avatar" :style="{ animationPlayState: playState ? 'running' : 'paused' }">
            <img :src="music.picUrl || music.song.album.picUrl" />
          </div>
        </div>
      </div>

      <!-- 歌词 -->
      <div class="text" @click="flag = true" v-show="!flag">
        <ul class="lyric" ref="top" :style="{ transform: `translateY(${moveY})` }" v-if="lyricArray.length > 0">
          <li v-for="(lyric, index) in lyricArray" :key="index" :class="{ active: index == currentIndex }">
            {{ lyric.lyric }}
          </li>

          <!-- {{ lyricArray }} -->
        </ul>
      </div>

      <footer>
        <div class="f_top">
          <!-- 爱心 -->
          <span v-show="flag" :class="['iconfont', 'icon-aixin', { red: red }]" @click="red = !red"></span>
          <!-- 下载 -->
          <span v-show="flag" class="iconfont icon-xiazai"></span>
          <!-- 评论 -->
          <span v-show="flag" class="iconfont icon-pinglun" @click.stop="showCom = true"></span>
          <!-- 更多 -->
          <span v-show="flag" class="iconfont icon-gengduo"></span>
        </div>
        <!-- 播放进度条 -->
        <div class="f_main">
          <label for="">{{ currentTime | formatMusicTime }}</label>
          <input type="range" min="0" max="100" v-model="rangetime" />
          <label for="">{{ totalTime | formatMusicTime }}</label>
        </div>
        <div class="f_f">
          <!-- 列表循环 icon-liebiaoxunhuan -->
          <!-- 单曲循环 icon-hanhan-01-01 -->
          <!-- 随机播放-01 icon-suijibofang01 -->
          <span :class="[
            'iconfont',
            { 'icon-liebiaoxunhuan': playMode == 0 },
            { 'icon-hanhan-01-01': playMode == 1 },
            { 'icon-suijibofang01': playMode == 2 },
          ]" @click.stop="musicMode"></span>
          &nbsp;

          <!-- 上一曲 -->
          <span class="iconfont icon-shangyiqu101" @click.stop="preMusic"></span>
          <!-- 播放/暂停按钮 -->
          <span :class="[
            'iconfont',
            { 'icon-zanting': playState },
            { 'icon-bofang': !playState },
          ]" @click.stop="changePlay"></span>
          <!-- 下一曲 -->
          <span class="iconfont icon-xiayiqu101" @click.stop="nextMusic"></span>
          <!-- 播放列表按钮 -->
          &nbsp;
          <span class="iconfont icon-24gf-playlistMusic" @click.stop="showPlaylist = true"></span>

          <transition enter-active-class="animate__animated animate__backInUp"
            leave-active-class="animate__animated animate__backOutDown">
            <!-- 播放列表 -->
            <ul :class="'playlist'" v-show="showPlaylist">
              <h3>当前播放</h3>
              <li :class="{ active: music.id == m.id }" v-for="(m, index) in playlist" :key="index"
                @click.stop="play(m)">
                <p>{{ index + 1 }} &nbsp; {{ m.name }}</p>
                <button @click.stop="$emit('clear', m)">&Chi;</button>
              </li>
            </ul>
          </transition>
        </div>
      </footer>
    </div>
    <transition enter-active-class="animate__animated animate__backInUp"
      leave-active-class="animate__animated animate__backOutDown">
      <song-comment :music="music" v-if="showCom" @showComment="showComment"></song-comment>
    </transition>
  </div>
</template>

<script>
import SongComment from "@/components/SongComment.vue";
import "animate.css";

export default {
  components: { SongComment },
  props: {
    music: {
      //当前播放音乐
      type: Object,
      default: () => {
        return null;
      },
    },
    playlist: {
      //播放列表
      type: Array,
      default: () => {
        return [];
      },
    },
    playState: {
      //播放状态
      type: Boolean,
      default: true,
    },
    currentTime: {
      //当前播放时间
      type: Number,
      default: 0,
    },
    totalTime: {
      //播放总时间
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      flag: true,
      lyric: null,
      showPlaylist: false,
      playIndex: 0,
      playMode: 0,//控制播放状态(0-顺序播放，1-单曲循环，2-随机播放)
      red: false,
      showCom: false,
    };
  },
  created() {
    document.body.style.overflow = "hidden";
    this.getLyric();
  },
  mounted() {
    window.addEventListener("scroll", this.lyricScroll);
  },
  beforeDestroy() {
    document.body.style.overflow = "auto";
  },
  methods: {
    async getLyric() {
      await this.axios.get("/lyric?id=" + this.music.id).then((re) => {
        this.lyric = re.lrc.lyric;
      });
    },

    changePlay() {
      //修改播放状态
      let playState = this.playState;
      playState = !playState;
      this.$emit("change", playState);
    },
    play(m) {
      this.$emit("play", m);
    },
    findMusicIndex() {
      this.playlist.forEach((v, index) => {
        if (v.id == this.music.id) {
          this.playIndex = index; //找到当前播放列表中，正在播放音乐歌曲的下标
        }
      });
    },
    changeMode() {
      if (this.playMode == 1) {
        this.$emit("changeTime", 0);
      } else if (this.playMode == 2) {
        let randIndex = Math.floor(Math.random() * this.playlist.length);
        let currentMusic = this.playlist[randIndex];
        this.$emit("play", currentMusic);
      }
    },
    preMusic() {
      //上一曲
      if (!this.playMode == 0) {
        return this.changeMode();
      }
      this.findMusicIndex();
      //如果当前播放下标为0，继续上一曲时，则播放最后一首歌曲
      if (this.playIndex == 0) {
        this.playIndex = this.playlist.length - 1;
      } else {
        this.playIndex--;
      }
      let currentMusic = this.playlist[this.playIndex];
      this.play(currentMusic);
      // this.lyricArray();
      // this.currentIndex();
    },
    nextMusic() {
      //下一曲
      if (!this.playMode == 0) {
        return this.changeMode();
      }
      this.findMusicIndex();
      if (this.playIndex == this.playlist.length - 1) {
        this.playIndex = 0;
      } else {
        this.playIndex++;
      }
      let currentMusic = this.playlist[this.playIndex];
      this.play(currentMusic);
      // this.lyricArray();
      // this.currentIndex();
    },
    musicMode() {
      this.playMode++;
      if (this.playMode > 2) {
        this.playMode = 0;
      }
    },

    showComment(value) {
      this.showCom = value;
    },
  },
  filters: {
    formatMusicTime(time) {
      let min = Math.floor(time / 60);
      let second = Math.floor(time % 60);
      min = min < 10 ? "0" + min : min;
      second = second < 10 ? "0" + second : second;
      return min + ":" + second;
    },
  },
  computed: {
    lyricArray() {
      if (!this.lyric) {
        return [];
      }
      let lyricArr = this.lyric.split("\n");
      lyricArr.pop();
      //[00:00.000] 作词
      let lyricReg = /\[(\d+):(\d+\.\d+)\]([\s\S.]*)/;
      return lyricArr.map((value) => {
        if (lyricReg.test(value)) {
          let ly = RegExp.$3;
          ly = ly.length < 1 ? "伴奏..." : ly;
          return {
            time: parseInt(RegExp.$1 * 60) + parseFloat(RegExp.$2),
            lyric: ly,
          };
        }
      });
    },

    currentIndex() {
      let index = 0;
      if (this.lyricArray.length < 1 || this.currentTime < 1) {
        return 0;
      }
      for (let i = 0; i < this.lyricArray.length; i++) {
        let ThisTime = this.lyricArray[i].time;
        let NextTime = this.lyricArray[i + 1].time;
        if (this.currentTime >= ThisTime && this.currentTime <= NextTime) {
          index = i;
          return i;
        }
      }
      return index;
    },

    rangetime: {
      // 播放进度条数据绑定计算属性
      get() {
        return 100 * (this.currentTime / this.totalTime);
      },
      set(value) {
        let currentTime = this.totalTime * (value / 100);
        this.$emit("changeTime", currentTime);
        if (this.totalTime == this.currentTime) {
          this.nextMusic();
        }
      },
    },

    moveY() {
      let y = this.currentIndex * 30;
      if (y < 100) {
        y = -y + 62;
        return y + "px";
      } else {
        y = y - 100;
        return `-${y}px`;
      }
    },
  },
  watch: {
    // music() {
    //   console.log("yyyyyyyyyyyyyyy");
    //   this.getLyric();
    // },
    music: {
      deep: true, // 深度侦听，侦听引用类型变化
      handler() {
        this.getLyric();
        // this.currentIndex();
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.full-screen {
  // width: 100vw;
  // height: 100vh;
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // background-color: skyblue;

  .box {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 110;

    .banner {
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      bottom: 0;
      z-index: 112;
    }

    .mask {
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      background-position: 50%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 111;
      filter: blur(20px);
      transform: scale(1.5);

      &::after {
        content: " ";
        background-color: rgba(0, 0, 0, 0.25);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 111;
      }
    }

    header {
      width: 100%;
      height: 75px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 112;
      overflow: hidden;

      .close {
        width: 25px;
        height: 25px;
        font-size: 16px;
        margin: 10px;
      }

      .fx {
        width: 25px;
        height: 25px;
        font-size: 16px;
        margin: 10px;
      }

      .name {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: white;
        overflow: hidden;
        /*溢出部分省略号处理*/
        text-overflow: ellipsis;
        padding: 2px 0;
        white-space: nowrap;

        p {
          font-size: 12px;
          /*强制文字在一行文本框内*/
          // white-space: nowrap;
          /*溢出部分省略号处理*/
          // text-overflow: ellipsis;
        }
      }
    }

    .main {
      width: 300px;
      height: 300px;
      z-index: 111;
      background-color: rgba(0, 0, 0, 0);
      border-radius: 50%;
      position: relative;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);

      .round {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before {
          content: " ";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 2;
          background: url(@/assets/disc.png) no-repeat;
          background-size: contain;
        }

        .avatar {
          width: 185px;
          height: 185px;
          border-radius: 50%;
          background: url(@/assets/disc_default.png) center/300px no-repeat;
          animation: roll 4s linear infinite;

          img {
            width: 100%;
            border-radius: 50%;
          }
        }
      }
    }

    .text {
      width: 100%;
      height: 65vh;
      background-color: rgba(0, 0, 0, 0);
      position: relative;
      top: 100px;
      left: 50%;
      z-index: 112;
      transform: translateX(-50%);
      overflow: auto;
      // box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.1) inset;

      // border: 1px solid red;
      // transform: translate(-50%, -50%);
      .lyric {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 20%;
        transition: 1s;

        li {
          line-height: 30px;
          text-align: center;
          white-space: nowrap;

          &.active {
            color: white;
            font-weight: bold;
          }
        }
      }
    }

    footer {
      width: 100%;
      height: 200px;
      background-color: rgba(0, 0, 0, 0);
      // background-color: #fff;
      position: absolute;
      bottom: 0;
      z-index: 112;
      display: flex;
      flex-direction: column;

      .f_top {
        width: 100%;
        // border: 1px solid red;
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px 20px 20px;

        span {
          display: block;
          width: 28px;
          height: 28px;
          font-size: 22px;
          // border: 1px solid skyblue;
          text-align: center;
          line-height: 28px;
          color: #ffffff;
        }

        .red {
          color: red;
        }
      }

      .f_main {
        width: 100%;
        // border: 1px solid red;
        flex: 1;
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 16px;
        color: white;
        padding: 0 10px 30px 10px;

        label {
          width: 50px;
          line-height: 48px;
        }

        input {
          flex: 1;
          -webkit-appearance: none;
          height: 2px;
          border-radius: 10px;
          background-color: #fff;

          -webkit-appearance: none;
          appearance: none;
          margin: 0;
          outline: 0;
          background-color: transparent;

          &::-webkit-slider-runnable-track {
            height: 4px;
            background: gray;
          }

          &::-webkit-slider-container {
            height: 10px;
            overflow: hidden;
          }

          &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid transparent;
            margin-top: -3px;
            border-image: linear-gradient(#fff, #fff) 0 fill / 8 20 8 0 / 4px 9px 3px 2000px;
          }
        }
      }

      .f_f {
        width: 100%;
        // border: 1px solid red;
        flex: 1;
        display: flex;
        justify-content: space-around;
        position: relative;

        span {
          display: block;
          width: 30px;
          height: 30px;
          font-size: 30px;
          // border: 1px solid skyblue;
          text-align: center;
          line-height: 28px;
          color: #ffffff;

          &:nth-child(3) {
            width: 60px;
            height: 60px;
            font-size: 60px;
            // border: 1px solid red;
          }
        }

        .playlist {
          width: 95%;
          height: 350px;
          position: absolute;
          bottom: 25%;
          border-radius: 20px;
          background-color: white;
          padding: 0px 20px;
          overflow-y: auto;
          z-index: 122;

          h3 {
            position: sticky;
            top: 0;
            background-color: #fff;
            padding: 10px 0px;
          }

          .active {
            color: red;
            font-weight: bold;
          }

          li {
            line-height: 30px;
            display: flex;

            p {
              flex: 1;
            }

            button {
              width: 30px;
              height: 30px;
              outline: none;
              border: none;
              font-size: 16px;
              color: #ccc;
              background-color: #fff;
            }
          }
        }

        .showlist {
          animation: showlist 0.5s ease-out;
        }

        .hiddenlist {
          animation: hiddenlist 0.5s ease-out;
        }
      }
    }
  }

  @keyframes roll {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes showlist {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0%);
    }
  }

  @keyframes hiddenlist {
    from {
      transform: translateY(0%);
    }

    to {
      transform: translateY(-100%);
    }
  }
}
</style>